<template>
  <div class="com">
    <picker mode="date" :start="startDate" end="2030-07-01" @change="onDateChange" style="display: inline-block;">
      <span v-if="!sectionDate">{{label}}</span>
      <span v-else>{{sectionDateName}}</span>
    </picker>
    <picker v-if="sectionDate" class="" mode="time"
      @change="onTimeChange" style="display: inline-block;">
      <span v-if="!sectionTime" class="c-red">&nbsp;&nbsp;请选择时间</span>
      <span v-else >&nbsp;&nbsp;{{sectionTime}}</span>
    </picker>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  props: {
    label: {
      type: String,
      default: '请选择时间'
    },
    value: [String]
  },
  data() {
    let t = this.value.split(' ')
    return {
      sectionDate: t[0] || '',
      sectionTime: t[1] || ''
    }
  },
  computed: {
    sectionDateName () {
      let t = dayjs(this.sectionDate).format('YY年M月D日')
      return t
    },
    time () {
      if (this.sectionDate && this.sectionTime) {
        return `${this.sectionDate} ${this.sectionTime}:00`
      }
      return ''
    },
    startDate () {
      return dayjs().format('YYYY-MM-DD')
    },
  },
  methods: {
    onDateChange (t) {
      this.sectionDate = t.mp.detail.value
      this.$emit('input', this.getTime())
    },
    onTimeChange (t) {
      this.sectionTime = t.mp.detail.value
      this.$emit('input', this.getTime())
    },
    getTime () {
      if (this.sectionDate && this.sectionTime) {
        return `${this.sectionDate} ${this.sectionTime}:00`
      }
      return ''
    }
  },
  watch: {
    value (nv) {
      let t = this.value.split(' ')
      this.sectionDate = t[0] || ''
      let sd = t[1] || ''
      this.sectionTime = sd.slice(0, 5)
    }
  }
}
</script>

<style scoped lang="less">
</style>
